<template>
    <a-layout>
      <a-layout-sider v-model:collapsed="sidebarCollapsed" collapsible>
        <div class="logo" />
        <a-menu
          theme="dark"
          mode="inline"
          :selected-keys="[currentRouteName]"
        >
          <a-menu-item v-for="route in routes" :key="route.name">
            <router-link :to="route.path">
              <component :is="route.meta.icon" />
              <span>{{ route.meta.title }}</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      
      <a-layout>
        <a-layout-header class="header">
          <menu-unfold-outlined
            v-if="sidebarCollapsed"
            class="trigger"
            @click="toggleSidebar"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="toggleSidebar"
          />
          <div class="right">
            <a-dropdown>
              <a class="user">{{ userInfo.name }}</a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="logout">
                    <logout-outlined />
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-layout-header>
        
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useUserStore } from '@/stores/user'
  import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    LogoutOutlined
  } from '@ant-design/icons-vue'
  
  const userStore = useUserStore()
  const router = useRouter()
  const route = useRoute()
  
  const sidebarCollapsed = computed({
    get: () => userStore.sidebarCollapsed,
    set: (value) => userStore.toggleSidebar()
  })
  
  const currentRouteName = computed(() => route.name)
  const userInfo = computed(() => userStore.userInfo)
  
  const routes = computed(() => router.options.routes[1].children)
  
  const logout = () => {
    userStore.logout()
    router.push('/login')
  }
  </script>
  
  <style scoped>
  .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
  }
  
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  
  .trigger:hover {
    color: #1890ff;
  }
  
  .right {
    float: right;
    height: 100%;
    overflow: hidden;
  }
  
  .user {
    display: inline-block;
    height: 100%;
    padding: 0 12px;
    cursor: pointer;
  }
  </style>